<template>
  <div class="toolbar-container">
    <!-- 菜单触发器 - 点击切换菜单显示状态 -->
    <div class="toolbar-trigger" @click="triggerToolbar"></div>
    <!-- <div class="side-bar" v-if="isShow"> -->
    <div class="side-bar">
      <SideBar />
    </div>
    <!-- <div class="bottom-bar" v-if="isShow"> -->
    <!-- <div class="bottom-bar">
      <BottomBar />
    </div> -->
  </div>
</template>

<script setup>
import SideBar from './SideBar/Index.vue'
import BottomBar from './BottomBar/Index.vue'
import { ref, onMounted } from 'vue'
import { getobjm } from '@/utils/getobjm.js'
const objm = getobjm()
onMounted(() => {
  // objm.viewerCreatedEvent.don((viewer) => {
  //   // 监听clickEvent鼠标事件
  //   viewer.clickEvent.don((e) => {
  //     // pickPosition拾取经纬度
  //     viewer.pickPosition(e.screenPosition).then((position) => {
  //       if (!position || !position.length) return
  //       console.log('点击位置处的三维经纬高坐标：', position)
  //     })
  //   })
  // })
})

const isShow = ref(false)
const triggerToolbar = () => {
  isShow.value = !isShow.value
}
</script>

<style lang="scss" scoped>
.toolbar-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  .toolbar-trigger {
    position: absolute;
    z-index: 2;
    bottom: 2.0833vw /* 40px -> 2.0833vw */;
    left: 1.0417vw /* 20px -> 1.0417vw */;
    width: 6.25vw /* 120px -> 6.25vw */;
    height: 6.25vw /* 120px -> 6.25vw */;
    background-image: url('@/assets/images/toolbar/toolbar.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    cursor: pointer;
  }
}
</style>
